<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>backface-visibility 属性</title>
    <!-- CSS 中的 backface-visibility 属性设置元素的背面在面向用户时是否可见 -->
</head>
<link rel="stylesheet" href="../common.css">
<style>
    .box-card {
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }

    .box-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        backface-visibility: hidden;
        -moz-backface-visibility: hidden;
    }

    .box-card:focus {
        outline: 0;
    }

    .box-card:hover .box-card-inner,
    .box-card:focus .box-card-inner {
        transform: rotateY(180deg);
    }

    .box-card-front,
    .box-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .box-card-front {
        background: linear-gradient(to left, #b98941, #da7808);
        color: black;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
    }

    .box-card-back {
        background: linear-gradient(to right, #da7808, #b98941);
        color: white;
        transform: rotateY(180deg);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
    }

    h3 {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }
</style>

<body>
    <div class="box-card">
        <div class="box-card-inner">
            <div class="box-card-front">
                <h3>hover翻转</h3>
            </div>
            <div class="box-card-back">
                <h3>苏苏就是小苏苏</h3>
            </div>
        </div>
    </div>
</body>

</html>